<template>
  <div>
    <div class="flex_between">
      <div>
        <el-button type="primary" @click="dialog = true">新增打卡</el-button>
        <!-- <el-button type="primary" @click="dialogSetting = true">
          应用设置
        </el-button> -->
      </div>
      <el-button @click="$emit('send')">返回</el-button>
    </div>
    <div style="margin-top: 10px">
      打卡名称：
      <el-input
        v-model="menuName"
        placeholder="请输入名称"
        style="width: 200px"
      />
    </div>
    <div style="margin: 10px 0">
      <el-button
        icon="el-icon-search"
        :loading="filterLoad"
        type="primary"
        @click="getGrowth('filterLoad')"
      >
        筛选
      </el-button>
      <el-button icon="el-icon-refresh" :loading="resetLoad" @click="reset">
        重置
      </el-button>
    </div>
    <el-table :data="tableData" :empty-text="emptyText">
      <el-table-column label="名称" prop="menu_name" />
      <el-table-column label="创建时间" prop="created_at" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="editPunch(scope.row)">
            编辑
          </el-button>
          <el-button type="danger" @click="delGrowth(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex_between">
      <div></div>
      <el-pagination
        :current-page.sync="page"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="getGrowth"
      />
    </div>

    <el-dialog title="新增打卡" :visible.sync="dialog" width="70%">
      <EditPunch v-if="dialog" :o-punch-detils="punchDetils" @send="over" />
    </el-dialog>

    <el-dialog title="应用设置" :visible.sync="dialogSetting">
      <div class="box">
        <div class="flex_y_center">
          <div class="title_txt">
            <span>*</span>
            是否开启图表：
          </div>
          <el-radio-group v-model="settingForm.is_show">
            <el-radio label="Y">开启</el-radio>
            <el-radio label="N">关闭</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getGrowthMenu, delGrowthMenu } from '@/api/punch'

  export default {
    components: {
      EditPunch: () => import('./editpunch.vue'),
    },
    data() {
      return {
        dialog: false,
        emptyText: ' ',
        tableData: [],
        page: 1, // 用作请求商品列表时的分页参数
        total: 10, // 控制分页显示的页码数

        menuName: '', // 打卡名称
        filterLoad: false,
        resetLoad: false,

        punchDetils: {},
        dialogSetting: false,
        settingForm: {
          is_show: 'Y',
        },
      }
    },
    watch: {
      dialog(newValue) {
        if (!newValue) {
          this.punchDetils = {}
        }
      },
    },
    mounted() {
      this.getGrowth()
    },
    methods: {
      // 获取成长打卡按钮
      getGrowth(e) {
        this[e] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const data = {
          menu_name: this.menuName,
          page: this.page,
          pagesize: 10,
        }
        getGrowthMenu(data).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data.data
            this.total = res.data.last_page * 10
          } else {
            this.$message.error(res.message)
            this.emptyText = '暂无数据'
          }
          this[e] = false
          loading.close()
        })
      },
      // 重置
      reset() {
        this.menuName = ''
        this.getGrowth('resetLoad')
      },
      // 编辑
      editPunch(row) {
        this.punchDetils = row
        this.dialog = true
      },
      // 删除
      delGrowth(row) {
        this.$confirm('确定要' + row.menu_name + '删除吗', '下架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const data = {
            id: row.id,
          }
          delGrowthMenu(data).then(() => {
            this.getGrowth()
          })
        })
      },
      over() {
        this.dialog = false
        this.getGrowth()
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }

  .box > div {
    margin-bottom: 10px;
  }
  .title_txt {
    width: 40%;
    text-align: right;
  }
</style>
